<template>
	<view :class="isDark?'darkBg':''">
		<cu-custom :bgColor="isDark?'bg-black':'bg-grey'" isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">面试题目</block>
		</cu-custom>
		<view :class="isDark?'dark':''">
			<view style="padding-top: 0rpx;">
				<!-- <view style="height: 545rpx; background-size: cover;  background-position: center;"
					:style="{backgroundImage:isDark?'url(https://web.cloudduolc.cn/image/adblack7.png)':'url(https://web.cloudduolc.cn/image/adwhite5.png)'}">	
					<ad unit-id="adunit-a121169b4b7f723c" ad-type="video" :ad-theme="isDark?'black':'white'"></ad>
				</view> -->
				<view class="cu-bar  solid-bottom" style="font-weight:bold" :class="isDark?'dark':'bg-white'">
					<view class="action">
						<text class="cuIcon-titles text-grey"></text>面试题目
						<text class="cuIcon-search"></text>

					</view>
				</view>

				<view class="cu-list menu card-menu card-menu margin-top-xl margin-bottom-xl text-center"
					:class="isDark?'text-black darkIn':'text-gray bg-white'">
					<view class="cu-item solid-bottom" style="border: 3rpx solid #000000;">
						<view class="content padding">
							<picker class="text-center" @change="bindPickerChange" :value="index" :range="array"
								:class="isDark?'darkIn':'bg-white'">
								<view class="text-center">{{array[index]}}</view>
							</picker>
							<view class=" text-center"><span :class="isDark?'darkIn':'bg-white'"
									style="font-size: 25rpx;">（点击选择岗位）</span><text class="cuIcon-formfill "></text>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-form-group margin-top" :class="isDark?'darkIn':'bg-white'">
					<view class="title">是否显示答案</view>
					<switch @change="AnswerAll" :class="answerAll?'checked':''" :checked="answerAll?true:false">
					</switch>
				</view>
				<view class="padding flex flex-wrap margin-top" :class="isDark?'darkIn':'bg-white'">
					<button class="cu-btn round line" @click="upDown(0)">
						<text class="text-right" :class="isDark?'darkIn':''">上一题</text>
					</button>
					<button class="cu-btn round line margin-left-xl" @click="upDown(1)" style="margin-left: 400rpx;">
						<text class="text-right" :class="isDark?'darkIn':''">下一题</text>
					</button>
				</view>
				<!-- <view class="padding margin-top flex flex-wrap " :class="isDark?'dark':'bg-white'">
					<button class="cu-btn round line" @click="refreshInfo()">
						<text class="cuIcon-refresh text-right" :class="isDark?'dark':''"></text></button>

				</view> -->
				<view v-if="totalList.length<=0" style="text-align: center;font-size: 40rpx;"
					class="margin-left margin-right" :class="isDark?'darkIn':'bg-white'">


					<image src="../../../static/score/empty.png" style="width: 600rpx;height: 600rpx;margin-top: 0rpx;">
					</image>
				</view>
				<view class=" margin padding" v-for="(val,index) in totalList" :key="index"
					:class="isDark?'darkIn':'bg-white'">
					<view style="display: flex;">

						<view style="width:10rpx;">{{number}}</view>
						<view>
							<view style="margin-left: 65rpx;">
								问题：{{val.question}}</view>

							<view style="margin-top: 20rpx;margin-left: 65rpx; word-break:break-all;" v-if="answerAll">
								答案：{{val.answer}}
							</view>
							<view style="margin-top: 20rpx;margin-left: 65rpx; word-break:break-all;" v-if="!answerAll">
								答案：{{val.hideAnswer}}
							</view>
						</view>
					</view>
				</view>

				<view style="height: 700rpx;" :class="isDark?'darkIn':''"></view>


			</view>
		</view>
		<!-- 	<zmm-watermark>

		</zmm-watermark> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				array: [],
				index: 0,
				list: [], //显示
				totalList: [], //全部
				total: null,
				num: null,
				isDark: this.isDark,
				id: 1,
				answerAll: true,
				number: 1
			}
		},
		onLoad() {


		},

		onShow() {
			let _this = this
			_this.refresh()
			_this.refreshInfo()
		},
		methods: {
			AnswerAll(e) {
				this.answerAll = e.detail.value
			},
			upDown(e) {
				let _this = this
				if (e == 0) {

					if (_this.number == 1) {
						uni.showToast({
							icon: 'none',
							title: '已经到顶了',
							duration: 2000
						});
					} else {
						_this.id -= 1
						_this.number -= 1
						_this.refreshInfo()
					}
				} else {
					_this.id += 1
					_this.number += 1
					_this.refreshInfo()
				}
			},
			showAnswer(e) {
				if (this.list[e].showAnswer) {
					this.list[e].showAnswer = false
				} else {
					this.list[e].showAnswer = true
				}
				console.log(this.list[e].showAnswer)
			},
			// onReachBottom() {
			// 	let _this = this
			// 	console.log("我已经滚动到底部了")
			// 	_this.refreshInfo()
			// },
			bindPickerChange: function(e) {
				let _this = this
				_this.index = e.target.value
				_this.id = 1
				_this.number = 1
				_this.refreshInfo()
				_this.totalList = []
			},

			/**
			 * @description  请求学期
			 */
			refresh: function() {
				let _this = this
				_this.$schoolApi.interviewType().then(response => {
					if (response.status == 0) {
						var total = 0;
						var list = []
						for (var i = 0; i < response.data.length; i++) {
							list[i] = response.data[i].name
						}
						_this.array = list
					}
					//这里只会在接口是成功状态返回
				})
			},
			/**
			 * @description  请求成绩+学期
			 */
			refreshInfo: function() {
				let _this = this
				var userInfo = _this.$store.state.userInfo
				console.log(_this.$store.state.isExit)
				if ((_this.$store.state.isExit == 1 | userInfo.password == "" | userInfo.password == null) && _this
					.$store.state.loginTip == null) {
					_this.$store.commit("loginTip", "1")
					uni.showModal({
						title: 'Hi',
						content: '会话已过期，\n当前功能需要登录，是否要去登录?\n(该程序的用户信息只存在手机本地，当切出程序需要重新登录)',
						confirmText: "去登录",
						cancelText: "再逛会",
						success: function(res) {
							_this.$store.commit("loginTip", null)
							if (res.confirm) {
								_this.$Router.navigateTo("/pages/bind/login/index")
							} else if (res.cancel) {
								console.log("点击了取消")
							} else {
								console.log("点击了别的")
							}
						}
					});
					return
				}



				let form = {
					type: parseInt(_this.index) + 1,
					id: _this.id
				}
				_this.$schoolApi.interviewInfo(form).then(response => {
					if (response.status == 0) {
						if (response.data.length == 0) {
							uni.showToast({
								icon: 'none',
								title: '已经到底了',
								duration: 2000
							});
							_this.number -= 1
							_this.id -= 1
						} else {
							if (_this.totalList.length != 0 && (_this.totalList[0].id == response.data[0]
									.id)) {
								console.log("相等")
								_this.id -= 1
								_this.refreshInfo()
							} else {
								_this.totalList = []
								_this.list = response.data
								_this.id = parseInt(response.data[0].id)
								for (var i = 0; i < 1; i++) {
									var str = ""
									for (var j = 0; j < response.data[i].answer.length; j++) {
										str += "x"
									}
									response.data[i].hideAnswer = str
									_this.totalList.push(response.data[i])
								}
							}



							//_this.id = parseInt(_this.totalList[_this.totalList.length - 1].id) + 1

							// uni.showToast({
							// 	icon: 'none',
							// 	title: '成功获取数据',
							// 	duration: 2000
							// });
						}



					} else if (response.status != 608 && response.status != 603) {
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {

								} else if (res.cancel) {

								}
							}
						});
					}
				})

			}




		}

	}
</script>

<style>
	.smallButton {
		width: 400rpx;
		background-color: #428bca;
		border-color: #357ebd;
		color: #fff;
		-moz-border-radius: 10rpx;
		-webkit-border-radius: 10rpx;
		border-radius: 10rpx;
		/* future proofing */
		-khtml-border-radius: 10rpx;
		/* for old Konqueror browsers */
		text-align: center;
		border: 1rpx solid transparent;
		margin: 0 rpx auto;
		font-size: 37rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 20rpx;
		margin: 30rpx;
	}
</style>
